<div class="user-table-container" [@fadeIn]="'active'">
    <form class="form-vertical" role="form">
        <div class="row">
            <div class="col-md-10">
                <div class="input-group">
                    <input [(ngModel)]="searchStr" name="searchStr" class="form-control" type="text" placeholder="用户名，手机号">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button" (click)="searchUser()">
                            <i class="fa fa-search" aria-hidden="true"></i>搜索
                        </button>
                    </span>
                </div>
            </div>
            <div class="col-md-2">
                <div class="input-group pull-right">
                    <button class="btn btn-primary" type="button" (click)="newUser()"><i class="fa fa-user" aria-hidden="true"></i>
                        创建用户</button>
                </div>
            </div>
        </div>
    </form>
    <div class="row">
        <div class="col-md-12">
            <div class="user-item-container">
                <p-table [value]="userList" dataKey="id" editMode="row"  
                    [paginator]="true" [rows]="10" [pageLinks]="10" [totalRecords]="totalRecords"
                    [lazy]="true" (onLazyLoad)="pageChanged($event)">
                    <ng-template pTemplate="header">
                        <tr>
                            <th>用户名</th>
                            <th>昵称</th>
                            <th>状态</th>
                            <th>email</th>
                            <th>手机号</th>
                            <th>注册时间</th>
                            <th>操作</th>
                        </tr>
                    </ng-template>
                    <ng-template pTemplate="body" let-rowData let-editing="editing" let-ri="rowIndex">
                        <tr [pEditableRow]="rowData">
                            <td>
                                {{rowData.userName}}
                            </td>
                            <td>
                                {{rowData.nickName}}
                            </td>
                            <td>
                                <span *ngIf="rowData.status == 1" class="label label-success">正常</span>
                                <span *ngIf="rowData.status == 0" class="label label-danger">禁用</span>
                            <td>
                                {{rowData.email}}
                            </td>
                            <td>
                                {{rowData.cellphone}}
                            </td>
                            <td>
                                {{rowData.createTime}}
                            </td>
                            <td style="text-align:right">
                                <button type="button" class="btn btn-success btn-sm" (click)="editUser(rowData, ri)">编辑</button>&nbsp;&nbsp;
                                <button type="button" class="btn btn-warning btn-sm">分配角色</button>&nbsp;&nbsp;
                                <button type="button" class="btn btn-danger btn-sm" (click)="delUser(rowData, ri)">删除</button>
                            </td>
                        </tr>
                    </ng-template>
                </p-table>
            </div>
        </div>
    </div>
</div>